<script setup>
import { Upload } from '@element-plus/icons-vue'
import AddGroup from '../../userGroup/edit/index.vue'

const route = useRoute()
const router = useRouter()

const status = reactive({
    editData: route.query.id,//是否编辑数据
    addGroupVisible: false,//添加用户组
    submitLoading: false,//提交按钮点击时的等待效果
})
const data = reactive({
    loginInfo: func.jsonStorage(config.storage.loginInfo),
    data: {},//数据
    group: [],//用户组
})
const rules = reactive({
    gid: [{ required: true, message: '请选择用户组', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    phone: [{
        validator: (rule, value, callback) => {
            if (!value || value == '' || verify.isPhone(value)) { callback() }
            else { callback(new Error('请输入正确的手机号码')) }
        }, trigger: 'blur'
    }],
    mail: [{
        validator: (rule, value, callback) => {
            if (!value || value == '' || verify.isMail(value)) { callback() }
            else { callback(new Error('请输入正确邮箱')) }
        }, trigger: 'blur'
    }],
    password: [
        { required: route.query.id ? false : true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码必须大于6位数', trigger: 'blur' }
    ],
})
const formRef = ref()

onMounted(() => {
    getData()
    getGroup()
})

//获取信息
const getData = () => {
    if (!status.editData) {//新增数据
        data.data = {}
        return false
    }
    axios.get(route.query.id == 'my' ? '/auth/myInfo' : '/user/info', {
        params: { id: route.query.id }
    }).then(response => {
        data.data = response.data
        const userInfo = func.jsonStorage(config.storage.loginInfo)
        if (route.query.id == 'my' || route.query.id == userInfo.id) {
            bus.emit('loginInfo', response.data)
        }
    })
}
//获取用户组
const getGroup = () => {
    axios.get('/auth/userGroupList').then(response => {
        data.group = response.data.list
    })
}
//提交信息
const submit = (form) => {
    form.validate((valid, fields) => {
        if (!valid) return false
        status.submitLoading = true
        axios.post(route.query.id == 'my' ? '/auth/editMyInfo' : '/user/edit', {
            ...data.data
        }).then(response => {
            sys.tip(response)
            if (response.status == 1) getData()
            setTimeout(() => {
                status.submitLoading = false
            }, 500)
        }).catch(error => {
            setTimeout(() => { status.submitLoading = false }, 500)
        })
    })
}
</script>

<template>
    <div>
        <el-dialog v-model="status.addGroupVisible" title="添加用户组" draggable width="900">
            <AddGroup :dialog="true" @status="(data) => {
                if (data.update) getGroup();
                if (data.close) status.addGroupVisible = false
            }" />
        </el-dialog>
        <Breadcrumb v-if="$power('/user/list')" :title="['用户', status.editData ? '编辑' : '新增']" :path="['/user/list']"
            :back="route.query.back" />
        <el-card>
            <template #header>
                <span>基本信息</span>
            </template>
            <el-form class="edit" ref="formRef" :model="data.data" :rules="rules">
                <el-form-item label="选择用户组" prop="gid">
                    <el-select clearable v-model="data.data.gid" filterable
                        style="width: calc(100% - 112px);max-width:calc(500px - 112px);">
                        <el-option v-for="item in data.group" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <el-button v-if="$power('/userGroup/edit')" class="ml10"
                        @click="() => { status.addGroupVisible = true }">添加用户组</el-button>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="data.data.username" clearable />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="data.data.phone" clearable />
                </el-form-item>
                <el-form-item label="邮箱" prop="mail">
                    <el-input v-model="data.data.mail" clearable />
                </el-form-item>
                <el-form-item label="设置密码" prop="password">
                    <el-input v-model="data.data.password" clearable />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="data.data.nickname" clearable />
                </el-form-item>
                <el-form-item label="头像" prop="head">
                    <ImageListUpload :maxCount="1" :list="data.data.head ? [{ url: data.data.head }] : []"
                        @change="(list) => { data.data.head = list[0] ? list[0].url : ''; }" />
                </el-form-item>
                <el-affix position="bottom" z-index="10">
                    <el-form-item label="&nbsp;" class="button-affix">
                        <el-button type="primary" :icon="Upload"
                            v-if="$power('/user/edit') || data.data.id == data.loginInfo.id"
                            :loading="status.submitLoading" @click="submit(formRef)">提交</el-button>
                        <el-button v-if="status.editData" @click="getData()"
                            :disabled="status.submitLoading">刷新&重置</el-button>
                        <el-button type="warning" :disabled="status.submitLoading" plain
                            @click="() => { router.push(route.query.back) }">返回</el-button>
                    </el-form-item>
                </el-affix>
            </el-form>
        </el-card>
    </div>
</template>

<style scoped lang="scss"></style>
